<!--
 * @Author: GKN
 * @Date: 2023-10-24 11:53:29
 * @LastEditTime: 2023-10-24 16:12:52
 * @LastEditors: GKN
 * @Description: 
 * @FilePath: \mod\src\view\user\mNumber\index.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-card class="box-card" style="padding:67px 0;margin-bottom:20px;">
                    <div class="flex-d flex-align">
                        <div class="cad1">
                            <span class="s1">{{ form.ddn }}</span>
                            <span>/次</span>
                        </div>
                        <div class="card2">下载文档</div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card class="box-card" style="padding:67px 0;margin-bottom:20px;">
                    <div class="flex-d flex-align">
                        <div class="cad1">
                            <span class="s1">{{ form.dvm }}</span>
                            <span>/次</span>
                        </div>
                        <div class="card2">下载视频</div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card class="box-card" style="padding:67px 0;">
                    <div class="flex-d flex-align">
                        <div class="cad1">
                            <span class="s1">{{ form.upn }}</span>
                            <span>/次</span>
                        </div>
                        <div class="card2">上传文档</div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card class="box-card" style="padding:67px 0;">
                    <div class="flex-d flex-align">
                        <div class="cad1">
                            <span class="s1">{{ form.ddSn }}</span>
                            <span>/次</span>
                        </div>
                        <div class="card2">文档被下载</div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
    <div class="vipview shadow-1 flex flex-j-s" style="margin-top:40px;">
        <div class="flex-d flex-align">
            <div class="cad1">
                <span class="s1">{{ form.sp }}</span>
                <span>/元</span>
            </div>
            <div class="card2">实现收益</div>
        </div>
        <div class="flex flex-align">
            <div class="btn-submit shadow-1" @click="show_dialog = true">去提现</div>
            <span style="color: #D10B00;margin-left: 10px;">提现记录</span>
        </div>
    </div>
    <el-dialog v-model="show_dialog" title="" width="35%" style="border-radius:15px;padding-bottom:10px;">
        <div style="font-size:24px;font-weight:bold;color:#333;">收益提现</div>
        <div style="width: 100%;margin-top:20px;">
            <el-form :model="form" label-width="70px" size="large">
                <el-form-item label="金额">
                    <el-col :span="24">
                        <el-input type="number" v-model="withdrawal_price"/>
                    </el-col>
                </el-form-item>
            </el-form>
        </div>
        <div style="text-align: left;padding-left: 70px;">请先<span class="cursor-p" @click="show_dialog1 = true" style="color: #D10B00;">登记</span>您的银行卡账号、开户行</div>
        <div>
            <div class="btn-submit shadow-1" @click="withdrawal" style="font-size: 18px;margin-top: 40px;">确认提现</div>
        </div>
    </el-dialog>
    <el-dialog v-model="show_dialog1" title="" width="40%" style="border-radius:15px;padding-bottom:10px;">
        <div style="font-size:24px;font-weight:bold;color:#333;">银行卡信息登记</div>
        <div style="width: 100%;margin-top:30px;">
            <el-form :model="form1" label-width="120px" size="large">
                <el-form-item label="银行支行地址">
                    <el-col :span="24">
                        <el-input v-model="form1.bAddr"/>
                    </el-col>
                </el-form-item>
                <el-form-item label="银行名称">
                    <el-col :span="24">
                        <el-input v-model="form1.bName"/>
                    </el-col>
                </el-form-item>
                <el-form-item label="收款银行">
                    <el-col :span="24">
                        <el-input v-model="form1.cardNo"/>
                    </el-col>
                </el-form-item>
                <el-form-item label="开户名">
                    <el-col :span="24">
                        <el-input v-model="form1.name"/>
                    </el-col>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-col :span="24">
                        <el-input v-model="form.phone"/>
                    </el-col>
                </el-form-item>
                <el-form-item label="验证码" style="margin-top:40px;">
                    <el-col :span="24">
                        <el-input v-model="form1.code" placeholder="请输入验证码">
                            <template #append>
                                <div class="cursor-p" @click="send" style="color: #d10b00;">
                                    {{ str }}
                                </div>
                            </template>
                        </el-input>
                    </el-col>
                    
                </el-form-item>
                <el-form-item label="是否重置">
                    <el-col :span="12">
                        <el-radio-group v-model="form1.isReset" class="ml-4">
                            <el-radio :label="1" size="large">是</el-radio>
                            <el-radio :label="0" size="large">否</el-radio>
                        </el-radio-group>
                    </el-col>
                </el-form-item>
            </el-form>
        </div>
        <div>
            <div class="btn-submit shadow-1" @click="binding" style="font-size: 18px;margin-top: 40px;">提交</div>
        </div>
    </el-dialog>
  </template>
  
  <script setup>
    import { ref,reactive, onMounted,getCurrentInstance } from "vue";
    const { proxy } = getCurrentInstance();
    import CryptoJS from 'crypto-js';
    const show_dialog = ref(false)
    const show_dialog1 = ref(false)
    const loading = ref(false) 
    import { useStore } from 'vuex';
    const store = new useStore();
    // 个人信息
    const form = ref({
        ddSn:'',//文档被下载数
        ddn:'',//下载文档数
        dvm:'',//下载视频数
        sp:'',//总金额
        upn:'',//文档上传数
    })
    const form1 = ref({})
    const withdrawal_price = ref('')
    const loginData = JSON.parse(localStorage.getItem( 'loginData' ))
    const getUserInfo=()=>{
        const a = JSON.parse(localStorage.getItem( 'user' ))
        form.value = {
            ddSn:a.ddSn?a.ddSn:'--',//文档被下载数
            ddn:a.ddn?a.ddn:'--',//下载文档数
            dvm:a.dvm?a.dvm:'--',//下载视频数
            sp:a.sp?a.sp:'--',//总金额
            upn:a.upn?a.upn:'--',//文档上传数
        }
        
    }
    getUserInfo()
    const withdrawal =()=>{
        loading.value = true
        proxy.$http.request(proxy.$api.user_wd,'post',{
            "price":Number(withdrawal_price.value)
        },false, function (res) {
            if(res&&res.data){
                if(res.data.code != 0){
                    proxy.$comJs.msg('error',res.data.msg)
                }else{
                    proxy.$comJs.msg('success','提交成功')
                    show_dialog.value = false
                }
            }
        })
        loading.value = false

    }
    const str = ref('发送验证码')
    const send = ()=>{
        if(str.value != '发送验证码'){
            return;
        }
        proxy.$http.request(proxy.$api.send_msg,'post',{
            "mobile": form1.value.phone
        },true, function (res) {
                if(res&&res.data){
                    proxy.$comJs.msg('success','发送验证码成功')
                    str.value = 20
                    setInterval(() => {
                        if(str.value > 0){
                            str.value = str.value-1
                        }else{
                            str.value = '发送验证码'
                        }
                    }, 1000);
                }
            }
        )
    }
    const binding =()=>{
        loading.value = true
        proxy.$http.request(proxy.$api.bind,'post',{
            ...form1.value
        },false, function (res) {
            if(res&&res.data){
                if(res.data.code != 0){
                    proxy.$comJs.msg('error',res.data.msg)
                }else{
                    proxy.$comJs.msg('success','提交成功')
                    show_dialog1.value = false
                }
            }
        })
        loading.value = false

    }
  </script>
  
  <style lang='less' scoped>
  .vipview{
      width: 100%;
      padding:47px 80px 41px 80px;
      background: linear-gradient(to bottom, rgba(255, 250, 248, 1), rgba(255, 225, 205, 1));
      border-radius: 10px 10px 10px 10px;
      .title{
          font-size: 30px;
          font-family: SourceHanSansCN-Medium, SourceHanSansCN;
          font-weight: 500;
          color: #77472F;
          padding-top: 0;
      }
      .center{
          display: flex;
      }
      .item{
          width: 25%;
          padding: 0 5px;
          display: flex;
          flex-direction: column;
          align-items: center;
          .img{
              width: 68px;
              height: 68px;
              border-radius:50%;
              overflow: hidden;
          }
          .cont{
              padding-top: 20px;
              .t{
                  font-size: 16px;
                  // text-align: left;
                  color: #78482f;
              }
              .c{
  
                  font-size: 12px;
                  text-align: left;
                  color: #8d8d8d;
              }
          }
      }
      .btn{
          width: 350px;
          height: 48px;
          background: #D10B00;
          border-radius: 24px 24px 24px 24px;
          opacity: 1;
          border: 1px solid #D10B00;
          font-size: 16px;
          color: #fff;
          line-height: 48px;
          margin: 40px auto;
      }
  }
  .cad1{
    display: flex;
    align-items: flex-end;
    
    .s1{
        font-size: 28px;
        color:#D10B00;
        font-weight: bold;
    }
    span{
        font-size: 14px;
        margin-left: 14px;
    }
  }
  .card2{
    font-size: 16px;
    margin-top: 28px;
    }
  </style>
  
  